import { Link, useNavigate } from 'react-router-dom';
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { Table, Tag, Space } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import img404 from '../../assets/error.png'
import { useChannel } from '@/hooks/useChannel';
import { useState, useEffect } from 'react';
import { getArticleList, deleteArticle } from '@/apis/article';
const { Option } = Select;
const { RangePicker } = DatePicker;
const Article = () => {
    const navigate = useNavigate()
    const { channelsList } = useChannel()
    console.log(channelsList);
    // 获取文章列表
    const [list, setList] = useState([])
    // 获取结果条数
    const [count, setCount] = useState(0)
    // 准备完整的请求参数对象
    const [params, setParams] = useState({
        status: '',
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: '',
        page: 1,
        per_page: 5
    })
    useEffect(() => {
        /**
         * 异步获取文章列表并设置相关状态
         * 此函数用于从后端获取文章列表数据，并根据返回结果更新页面状态
         * 他没有参数，但会使用全局或上层作用域中的`params`变量来调用`getArticleList`函数
         */
        async function getList() {
            // 使用await关键字等待`getArticleList`函数完成，获取文章列表的Promise对象
            const res = await getArticleList(params)
            setList(res.data.data.results)
            setCount(res.data.data.total_count)
        }
        getList()
    }, [params])
    // console.log(list);
    // 文章列表模块-适配文章状态
    const status = {
        0: <Tag color="default">草稿</Tag>,
        1: <Tag color="processing">待审核</Tag>,
        2: <Tag color="success">审核通过</Tag>,
        3: <Tag color="error">审核失败</Tag>,
    }
    // 点击筛选提交表单数据
    const onFinish = (formValues) => {
        console.log(formValues);
        setParams({
            ...params,
            status: formValues.status,
            channel_id: formValues.channel_id,
            begin_pubdate: formValues.date ? formValues.date[0].format('YYYY-MM-DD') : '',
            end_pubdate: formValues.date ? formValues.date[1].format('YYYY-MM-DD') : ''
        })
    }
    // 分页跳转逻辑
    const onPageChange = (page) => {
        setParams({
            ...params,
            page
        })
    }
    // 删除文章
    const confirmDelete = async (id) => {
        console.log(id);
        // 调用删除接口
        await deleteArticle(id)
        setParams({
            ...params,
        })
    }
    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: data => status[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => { navigate(`/publish?id=${data.id}`) }} />
                        <Popconfirm
                            title="确认删除该条文章吗？"
                            onConfirm={() => confirmDelete(data.id)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    // 准备表格body数据
    const data = [
        {
            id: '8218',
            comment_count: 0,
            cover: {
                images: [],
            },
            like_count: 0,
            pubdate: '2019-03-11 09:00:00',
            read_count: 2,
            status: 2,
            title: 'wkwebview离线化加载h5资源解决方案',
        }
    ]
    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to='/'>首页</Link> },
                        { title: '文章列表' }
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: '' }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={1}>待审核</Radio>
                            <Radio value={2}>审核通过</Radio>
                            <Radio value={3}>审核失败</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择文章频道"
                            style={{ width: 120 }}
                        >
                            {channelsList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
                <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
                    <Table rowKey="id" columns={columns} dataSource={list} pagination={
                        {
                            pageSize: params.per_page,
                            total: count,
                            showTotal: total => `共 ${total} 条`,
                            onChange: onPageChange
                        }} />
                </Card>
            </Card>
        </div>
    );
};
export default Article;